<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <link href="../css/account.css" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" >
    <el-button @click="addAccountWindow=true"  type="primary">新增管理员</el-button>
    <el-table :data="accounts"  style="width: 100%">
        <el-table-column prop="accountName" label="账号" width="100">
        </el-table-column>
        <el-table-column prop="accountNickName" label="昵称" width="80">
        </el-table-column>
        <el-table-column prop="accountPhone" label="手机" width="120">
        </el-table-column>
        <el-table-column prop="accountRoleName" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="stateName" label="账号状态" width="100">
        </el-table-column>
        <el-table-column prop="powerName" label="权限" width="100">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
               <el-button v-if="scope.row.accountState==1" @click="updateState(scope.row,2)" type="warning">冻结</el-button>
                <el-button v-if="scope.row.accountState==2" @click="updateState(scope.row,1)" type="warning" >恢复</el-button>
                <el-button v-if="scope.row.accountState==1" @click="updateState(scope.row,0)" type="danger" >删除</el-button>
            </template>
        </el-table-column>
        <el-table-column label="权限管理" width="200">
            <template slot-scope="scope">
                <el-button v-if="scope.row.accountState==1" @click="updatePower(scope.row)" type="primary">授权</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="授权窗口" :visible.sync="showPowerWindow" width="50%"  :before-close="handleClose1">
        <el-select  v-model="updatePowerObj.accountPowerId" @change="authorization" placeholder="权利等级">
            <el-option
                    v-for="item in powerLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="addAccountWindow" width="30%" >
      <span>
          <el-row :gutter="20">
          <el-col :span="24">
            <el-input placeholder="请输入手机号" v-model="newAccount.accountPhone">
              <template slot="prepend">手机号:</template>
            </el-input>
          </el-col>
        </el-row>
      </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="addAccountWindow = false">取 消</el-button>
        <el-button type="primary" @click="addAccount">添加</el-button>
      </span>
    </el-dialog>

</div>

<script src="../js/account.js" type="text/javascript"></script>
</body>
</html>